<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}
</route>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getDoctorList } from '@/api/doctor'
import type { IGetDoctorListResponse, IDoctorItem } from '@/api/types/doctor'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import {http} from '@/http/http'

import ArticleList from '@/components/ArticleList.vue'
// 定义标签数据
const tabs = ref([
  { title: '关注', type: 'like' },
  { title: '推荐', type: 'recommend' },
  { title: '减脂', type: 'fatReduction' },
  { title: '饮食', type: 'food' }
])

// 当前激活的标签索引
const activeTab = ref(1)

// 医生列表数据
const doctorList = ref<IDoctorItem[]>([])

// 加载状态
const doctorLoading = ref(false)
const articleLoading = ref(false)

// 当前页码
const doctorCurrentPage = ref(1)
const articleCurrentPage = ref(1)

// 每页数量
const pageSize = ref(10)

// 总页数
const totalPages = ref(1)
const doctorTotalPages = ref(1)
const articleTotalPages = ref(1)

const articleListRef = ref<InstanceType<typeof ArticleList> | null>(null)

// 获取医生列表
const fetchDoctorList = async () => {
  if (doctorLoading.value) return

  doctorLoading.value = true
  try {
    const response = await getDoctorList({
      current: doctorCurrentPage.value,
      pageSize: pageSize.value
    })

    if (response.code === 10000) {
      if (doctorCurrentPage.value === 1) {
        doctorList.value = response.data.rows
      } else {
        doctorList.value = [...doctorList.value, ...response.data.rows]
      }
      doctorTotalPages.value = response.data.pageTotal
    } else {
      uni.showToast({
        title: response.message || '获取医生数据失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('获取医生数据失败:', error)
    uni.showToast({
      title: '网络异常，请重试',
      icon: 'none'
    })
  } finally {
    doctorLoading.value = false
  }
}

// 获取数据（根据标签类型决定调用哪个接口）
const fetchData = async () => {
  if (activeTab.value === 0) {
    // 关注标签，获取医生
    doctorCurrentPage.value = 1
    await fetchDoctorList()
}
}

// 处理标签点击事件
const handleTabClick = (index: number) => {
  activeTab.value = index
  fetchData()//重新获取数据
}

// 页面加载时获取数据
onMounted(() => {
  fetchData()
})

// 下拉刷新
const onRefresh = () => {
  if (activeTab.value === 0) {
    doctorCurrentPage.value = 1
    fetchDoctorList().then(() => {
      articleListRef.value?.refresh()
      uni.stopPullDownRefresh()
    })
  } else {
     articleListRef.value?.refresh()
      uni.stopPullDownRefresh()
  }
}

// 上拉加载更多
const onLoadMore = () => {
  if (activeTab.value === 0) {
    // 关注标签，先加载医生列表，医生列表加载完后再加载文章列表
    if (doctorCurrentPage.value < doctorTotalPages.value) {
      doctorCurrentPage.value++
      fetchDoctorList()
    } else {
      // 通知文章列表组件加载更多
      articleListRef.value?.loadMore()
    }
  } else {
    // 通知文章列表组件加载更多
    articleListRef.value?.loadMore()
  }
}

// 添加移除HTML标签的函数
const stripHtmlTags = (html: string) => {
  if (!html) return '';
  return html.replace(/<[^>]*>/g, '');
}

// 注册下拉刷新和上拉加载更多
// uni.onPullDownRefresh(onRefresh)
// uni.onReachBottom(onLoadMore)

// 处理关注/取消关注操作（仅医生列表）
const handleFollow = async (type: string, id: string, item: any) => {
  try {
    const response = await http.post('/like', {
      type,
      id
    })

    if (response.code === 10000) {
      // 更新关注状态
      item.likeFlag = item.likeFlag === 0 ? 1 : 0
      uni.showToast({
        title: item.likeFlag === 1 ? '关注成功' : '取消关注成功',
        icon: 'success'
      })
    } else {
      uni.showToast({
        title: response.message || '操作失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('关注操作失败:', error)
    uni.showToast({
      title: '网络异常，请重试',
      icon: 'none'
    })
  }
}

//跳转我的处方
const goToprescription=()=>{
  uni.navigateTo({
    url:'/pages/prescription/prescription'
  })
}
//跳转全部订单
const goToallorder=()=>{
  uni.navigateTo({
    url:'/pages/allorder/allorder'
  })
}
</script>

<template>
  <view>
    <!-- 自定义导航栏 -->
<view class="custom-navigation"></view>
<view class="content">
  <view class="top">
    <text class="hander">优医</text>
  </view>
  <view style="background-color: #57d1d0;border-radius: 0rpx 0rpx 50% 50%;">
    <input type="text" class="input" placeholder="搜一搜：疾病/症状/医生/健康知识" />
    <img style="position: absolute;top: 152rpx;width:48rpx;height:48rpx;left: 55rpx;" src="/static/image/search_default@1x.png" alt="" />

  </view>
  <view style="padding: 30rpx;display: flex;justify-content:space-around;">
  <navigator style="text-align: center;" url="/pages/saydoctor/saydoctor">
    <image src="/static/image/ask_doctor@1x.png" style="width: 92rpx;height: 92rpx;" alt="" />
      <view style="font-size: 28rpx;">问医生</view>
      <view style="font-size: 22rpx;color: #848484;margin-top: 10rpx;">按科室查问医生</view>
  </navigator>
  <navigator style="text-align: center;" url="/pages/extremespeed/extremespeed">
    <image src="/static/image/inquiry_graphic@1x.png" style="width: 92rpx;height: 92rpx;" alt="" />
      <view style="font-size: 28rpx;">极速问诊</view>
      <view style="font-size: 22rpx;color: #848484;margin-top: 10rpx;">20S医生极速回复</view>
  </navigator>
    <view style="text-align: center;">
      <image src="/static/image/inquiry_prescribe@1x.png" style="width: 92rpx;height: 92rpx;" alt="" />
      <view style="font-size: 28rpx;">开药门诊</view>
      <view style="font-size: 22rpx;color: #848484;margin-top: 10rpx;">线上买药更方便</view>
    </view>
  </view>
  <view style="padding:20rpx 30rpx;display: flex;justify-content: space-around;">
    <view style="text-align:center" @click="goToallorder">
      <image src="/static/image/drug_order@1x.png" style="width: 62rpx;height: 62rpx;" mode="" />
      <view style="font-size: 26rpx;">药品订单</view>
    </view>
    <view style="text-align:center">
      <image src="/static/image/health_records@1x.png" style="width: 62rpx;height: 62rpx;" mode="" />
      <view style="font-size: 26rpx;">健康档案</view>
    </view>
    <view style="text-align:center" @click="goToprescription">
      <image src="/static/image/my_prescription@1x.png" style="width: 62rpx;height: 62rpx;" mode="" />
      <view style="font-size: 26rpx;">我的处方</view>
    </view>
    <view style="text-align:center">
      <image src="/static/image/disease_inquiry@1x.png" style="width: 62rpx;height: 62rpx;" mode="" />
      <view style="font-size: 26rpx;">疾病查询</view>
    </view>
  </view>
  <view style="padding: 30rpx;">
    <image src="/static/image/coupon_banner@1x.png" style="width: 690rpx;height:200rpx ;" mode="" />
  </view>

  <!-- 标签导航 -->
  <view class="tab-nav">
    <view v-for="(tab, index) in tabs" :key="index" 
          class="tab-nav-item" 
          :class="{ 'active': index === activeTab }" 
          @click="handleTabClick(index)">
      {{ tab.title }}
    </view>
  </view>

   <view class="tab-content-container">
    <view class="tab-content-item show">
      <!-- 关注标签显示医生列表和文章列表 -->
      <template v-if="activeTab === 0">
        <!-- 医生列表 -->
        <view class="bigsis">
          <view class="section-title" style="font-size: 35rpx;padding-top:20rpx;">推荐关注 <text class="see-more">查看更多 ></text></view>

        <view class="doctor-list">
          <view v-for="item in doctorList" :key="item.id" class="doctor-cards">
            <image class="doctor-avatars" :src="item.avatar" mode="aspectFill" />
            <view class="doctor-name">{{ item.name }}</view>
            <view class="doctor-title">{{ item.hospitalName }}</view>
            <view class="follow-btn" @click="handleFollow('doc', item.id, item, true)">
              {{ item.likeFlag === 0 ? '+ 关注' : '已关注' }}</view>
          </view>
        </view>
        </view>

        <!-- 加载中提示 -->
        <view class="loading" v-if="doctorLoading">加载中...</view>

        <!-- 文章列表 -->
            <ArticleList 
              ref="articleListRef"
              :type="tabs[activeTab].type"
              @refresh="() => {}"
              @load-more="() => {}"
            />
      </template>
      
      <!-- 其他标签只显示文章列表 -->
      <template v-else>
       <ArticleList 
              ref="articleListRef"
              :type="tabs[activeTab].type"
              @refresh="() => {}"
              @load-more="() => {}"
            />
      </template>
    </view>
  </view>
</view>
  </view>
</template>

<style>
.custom-navigation {
  height: 20px;
  padding-top: 20px;
  background: #57d1d0;
  text-align: center;
  color: white;
  line-height: 90px;
}
.content{
  width: 100vw;
  height: 100vh;
  list-style: none;
}
.top{
  padding-bottom: 20rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  height: 88rpx;
  background-color: #57d1d0;
}
.hander{
  font-size: 37rpx;
  color: white;
}
.input{
  box-sizing: border-box;
  margin: 0 30rpx 0 30rpx;
  height: 80rpx;
  width: 690rpx;
  padding-left: 80rpx;
  background-color: white;
  border-radius: 44rpx;
  box-shadow: 0px 15px 22px -7px #E0ECFAD1;
  font-size: 28rpx;
}
.page{
  padding: 30rpx;
}
.tabs{
  margin-right: 50rpx;
  padding-bottom: 20rpx;
}
/* 页面基础样式 */
.page {
  padding: 15px;
  background-color: #f5f5f5;
}
.swip{
  height: 100%;
}
.article-images {
  display: flex;
  gap: 8rpx;          /* 图片之间的间距 */
  margin-top: 16rpx;  /* 与上方内容的间距 */
}

/* 单张图片：均分宽度 + 固定高度 + 圆角 */
.article-img {
  flex: 1;                  /* 自动均分可用宽度 */
  height: 240rpx;           /* 固定高度（可根据设计调整） */
  border-radius: 8rpx;      /* 圆角优化视觉 */
  object-fit: cover;        /* 保持图片比例，避免拉伸变形 */
}
.tab-nav {
  display: flex;
  justify-content: left;
  
  /* border-bottom: 1px solid #ccc; */
}

.tab-nav-item {
  padding: 10px;
  cursor: pointer;
  font-size: 33rpx;
  padding-left:30rpx ;
}

.tab-nav-item.active {
  /* color: #57d1d0; */
  border-bottom: 4px solid #57d1d0;
  font-weight: bold;
  width: fit-content;
}

.tab-content-container {
  padding: 20px;
}

.tab-content-item {
  display: none;
}

.tab-content-item.show {
  display: block;
}
.bigsis{
  width: 100vw;
  height: 200px;
  margin-top: -93rpx;
  margin-left: -45rpx;
  /* margin-bottom: -10px; */
  background-color: #f6f7f9;
  padding-left: 20rpx;
}
/* 医生卡片样式 */
.doctor-list {
  display: flex;
  overflow-x: scroll;
  padding: 10rpx 0;
  width: 100vw;
  margin-left: -45rpx;
  box-sizing: border-box;
}
.doctor-cards {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  padding: 15px;
  height: 150px;
  padding-left: 70rpx;
  margin-left: 40rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.doctor-card {
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 15px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.doctor-info {
  display: flex;
  align-items: center;
  /* margin-top: -20rpx; */
  margin-bottom: 10px;
}
.doctor-avatars {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
}
.doctor-avatar {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  margin-right: 12px;
}

.doctor-details {
  flex: 1;
}

.doctor-name {
  font-size: 12px;
  font-weight: bold;
  color: #333;
}

.doctor-title {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}

.section-title {
  font-size: 20rpx;
  font-weight: bold;
  color: #333;
  margin: 20rpx 0 10rpx 0;
  padding-left: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.see-more {
  font-size: 26rpx;
  font-weight: normal;
  color: gray;
  padding-right: 20rpx;
}

.follow-btn {
  color: #07c160;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid #07c160;
  border-radius: 15px;
  height: 25px;
}

/* 文章卡片样式 */
.article-card {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 3px;
  padding: 15px;
  width: 100vw;
  margin-left: -45rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.article-card-full {
  background-color: #fff;
  /* border-radius: 10px; */
  margin-bottom: 2px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100vw;
  margin-left: -20px;
}

.article-content-wrapper {
  margin-top: 10px;
}

.article-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.article-tag {
  color: #07c160;
  font-size: 12px;
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 10px;
}

.article-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.article-stats {
  display: flex;
  font-size: 12px;
  color: #999;
}

.stat-item {
  margin-right: 15px;
}
.loading {
  text-align: center;
  padding: 10px;
  color: #999;
}

/* 分区标题样式 */
.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 20px 0 10px 0;
  padding-left: 10px;
}

/* 列表容器样式 */
.doctor-list, .article-list {
  margin-top: 10px;
}
</style>